<template>
  <div id="message">
    <div class="message-list" ref="wrapper">
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{pulldownMsg}}</span>
        </div>
        <!-- 内容列表 -->
        <ul class="content" v-if="list.length != 0">
          <li class="item" v-for="(item,index) in list" :key="index" @click="navDetail(index)">
            <md-cell-item :title="item.title" no-border>
              <i class="tip" v-if="item.readok == 0"></i>
              <p class="time">
                <span>{{item.genre}}</span>
                <span>{{item.createtime}}</span>
              </p>
              <p class="desc" v-html="item.file"></p>
            </md-cell-item>
          </li>
        </ul>
        <ul class="content" v-else>
          <li class="empty-list">暂无通知</li>
        </ul>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{pullupMsg}}</span>
        </div>
      </div>
    </div>
    <div class="go-back" v-if="router != 1" @click="goIndex">首页</div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { Toast, Dialog, CellItem, Landscape } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [Dialog.name]: Dialog,
    [CellItem.name]: CellItem
  },
  name: "message",
  data() {
    return {
      router: 0, //1来自首页
      mobile: "", //
      uid: null,
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      pn: 1, //页码
      list: [],
    };
  },
  methods: {
    // 回首页
    goIndex(){
      this.$router.replace({
        path: "/index"
      })
    },
    // 获取列表
    getLetter() {
      Toast.loading("加载中...");
      let mobile = this.mobile;
      let params = {
        mobile,
        pn: 1,
        pagesize: 10
      };
      https
        .fetchPost(config.getLetter, params)
        .then(res => {
          Toast.hide();
          if (res.data.code == 1) {
            let list = res.data.data;
            if (list.length != 0) {
              list.forEach(element => {
                element.createtime = this.dataFormat(
                  element.createtime * 1000,
                  1
                );
              });
              this.pn = 1;
              this.list = list;
              //恢复刷新提示文本值
              this.pulldownMsg = "下拉刷新";
              //刷新列表后，重新计算滚动区域高度
              this.scroll.refresh();
            } else {
              Toast.failed("目前没有通知");
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          Toast.hide();
          console.log(err);
        });
    },
    // 加载更多
    getMoreLetter() {
      let pagesize = 10; //条数
      let pn = this.pn;
      pn++;
      let mobile = this.mobile;
      let params = {
        mobile,
        pn,
        pagesize
      };
      https
        .fetchPost(config.getLetter, params)
        .then(res => {
          if (res.data.code == 1) {
            if (res.data.data.length != 0) {
              let oldList = this.list;
              let newList = res.data.data;
              newList.forEach(element => {
                element.createtime = this.dataFormat(
                  element.createtime * 1000,
                  1
                );
              });
              this.list = oldList.concat(newList);
              this.pn = pn;
              //恢复文本值
              this.pullupMsg = "加载更多";
              this.scroll.refresh();
            } else {
              Toast.failed("没有更多咯");
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 
    navDetail(index){
      let uid = this.uid;
      let lid = this.list[index].id;
      this.$router.push({
        path: "/messageDetail",
        query: {uid:uid,lid:lid}
      })
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (type == 1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d + " " + h + ":" + i;
      }
    },
    // 初始滚动
    initScroll() {
      const that = this;
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          //初始化better-scroll
          probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
          click: true //是否派发click事件
        });
        // 滑动过程中事件
        this.scroll.on("scroll", pos => {
          if (pos.y > 30) {
            this.pulldownMsg = "释放立即刷新";
          }
        });
        //滑动结束松开事件
        this.scroll.on("touchEnd", pos => {
          //上拉刷新
          if (pos.y > 30) {
            this.getLetter();
          } else if (pos.y < this.scroll.maxScrollY - 30) {
            //下拉加载
            this.pullupMsg = "加载中。。。";
            this.getMoreLetter();
          }
        });
      });
    }
  },
  created() {
    this.mobile = this.$route.query.mobile;
    this.uid = this.$route.query.uid;
    let router = this.$route.query.router;
    if(router == "index"){
      this.router = 1;
    }else {
      this.router == 0;
    }
    this.getLetter();
    this.initScroll();
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#message {
  .go-back {
    position: fixed;
    bottom: 120px;
    right: 50px;
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d7b987;
    color: #fff;
    font-size: 28px;
  }
  .message-list {
    height: 100vh;
    padding: 0 40px;
    .item {
      position: relative;
      border-bottom: 1px solid #f2f2f2;
      .tip {
        position: absolute;
        right: 30px;
        top: 30px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgb(236, 62, 62);
      }
      .time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24px;
        height: 60px;
        color: #999;
      }
      .desc {
        font-size: 26px;
        color: #666;
        line-height: 44px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
      }
    }
  }
  .empty-list {
    padding-top: 100px;
    font-size: 30px;
    color: #666;
    text-align: center;
  }
  .bscroll-container {
    min-height: 100%;
  }
  .top-tip {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    text-align: center;
    color: #ccc;
  }
  .bottom-tip {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #999;
    font-size: 28px;
    position: absolute;
    bottom: -45px;
    left: 0;
  }
  .detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 40px;
      font-weight: 600;
      padding-top: 40px;
      margin-bottom: 40px;
    }
    .h2-desc {
      display: flex;
      align-items: center;
      width: 600px;
      justify-content: space-between;
      font-size: 26px;
      color: #999;
    }
    .text-content {
      padding: 0 30px;
      margin-top: 30px;
      color: #666;
      font-size: 30px;
      line-height: 40px;
      margin-bottom: 40px;
    }
    .img-item {
      // border: 1px solid #f2f2f2;
      width: 600px;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 30px;
      img {
        display: block;
        margin: 0 auto;
        height: 350px;
      }
    }
  }
}
</style>
